<template>
  <div class="panel01">
    <CrTitle>出行路线规划</CrTitle>
    <el-autocomplete
        class="cr-el-autocomplete"
        v-model="searchStr"
        :fetch-suggestions="querySearchAsync"
        placeholder="请输入内容"
        @select="handleSelect"
    >
      <template #append>
        <el-button icon="el-icon-search" ></el-button>
      </template>
    </el-autocomplete>
  </div>
  <div class="panel02">
    <CrTitle>实时租赁情况</CrTitle>
    <ul class="infow-box">
      <li class="row" v-for="row in datalists">
        <div class="cont-box" v-for="item in row">
          <div class="num">
            <span class="icon" :style="{backgroundColor:item.bgc}"></span>
            <span :style="{color:item.bgc}">{{ item.num }}</span>
          </div>
          <div class="title">{{ item.title }}</div>
        </div>
      </li>
    </ul>
  </div>
  <div class="panel03">
    <CrTitle>今日各时段租赁情况</CrTitle>
    <echarts04 class="echarsss1" :value="free"></echarts04>
  </div>
  <div class="panel04">
    <CrTitle>收益来源</CrTitle>
    <echarts05 class="echarsss1" :value="((count-free)/count).toFixed(2)"></echarts05>
  </div>
</template>

<script setup lang="ts">
import echarts05 from '../../components/echarts/echarts05.vue';
import echarts04 from '../../components/echarts/echarts04.vue';
import CrTitle from '../../components/CrTitle.vue';
import BicycleInfoWindow from '../../components/InfoWindow/BicycleInfoWindow.vue';
import {reactive, onMounted, onUnmounted, ref} from 'vue'
import {GlobalVariables} from "../../GlobalVariables";
import {AMapUtil} from "../../utils/AMapUtil";
import {ElMessage} from "element-plus";
import {AxiosCtrl} from "../../axios";
const searchStr = ref("");//搜索字符串
let placeSearchOverlayGroups: any = null;
const hours: any = new Date().getHours();
const count: any = parseInt(Math.random() * 500 + "") + 50 * 59 * hours;
const free: any = parseInt(count * Math.random() * 0.05 + count * 0.05 + "");
const free_1: any = parseInt(free - count * Math.random() * 0.05 - count * 0.05 + "");
const evaluate: any = (Math.random() + 4).toFixed(2);
const datalists = reactive([
  [
    {
      title: "今日租赁次数",
      bgc: "#ff4ff9",
      num: count,
    },
    {
      title: "租赁中",
      bgc: "#80c5ff",
      num: free,
    }
  ],
  [
    {
      title: "同比上日",
      bgc: "#ff3e41",
      num: free_1,
    },
    {
      title: "评分",
      bgc: "#ff3e41",
      num: evaluate,
    }
  ]
])

const count2: any = ((count - free) * 0.7).toFixed(2);
const count3: any = (free_1 * 0.7 * hours).toFixed(2);
const absCount3 = Math.abs(count3);
const count4: any = (count3 * Math.random() * 0.3 + absCount3 * Math.random() * 0.3 + absCount3 * Math.random() * 0.4).toFixed(2);
const absCount4 = Math.abs(count4);
const count5 = (count4 * Math.random() * 0.3 + absCount4 * Math.random() * 0.3 + absCount4 * Math.random() * 0.4).toFixed(2);
const datalists2 = reactive([
  [
    {
      title: "今日总收益",
      bgc: "#ff4ff9",
      num: count2,
    },
    {
      title: "同比上日",
      bgc: "#ff3e41",
      num: count3,
    },
  ],
  [
    {
      title: "同比上月",
      bgc: "#ff3e41",
      num: count4,
    },
    {
      title: "同比上年",
      bgc: "#ff3e41",
      num: count5,
    }
  ]
])
let placeSearch: any = null;
let sourPosition:any = null;
async function querySearchAsync(queryString:string, cb:Function) {
  console.log(queryString)
  if (!queryString) {
    cb([]);
    return;
  }
  const pois = await AxiosCtrl.searchByStr(queryString);
  const results = pois.map((item:any) => {
    return {
      value: item.name,
      location: item.location
    };
  });
  cb(results);
}


function PlaceSearch(center: any, radius: number) {
  clearParkingSpotCluster();
  if (placeSearch == null) {
    placeSearch = new AMap.PlaceSearch({
      type: "自行车", // 兴趣点类别
      pageSize: 50, // 单页显示结果条数
      pageIndex: 1, // 页码
      city: "福州市", // 兴趣点城市
      citylimit: true,  //是否强制限制在设置的城市内搜索
      // map: GlobalVariables.map, // 展现结果的地图实例
      renderStyle: "default",
      autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });
  }
  placeSearch.searchNearBy('', center, radius, function (status: any, result: any) {
    if (status !== "complete") {
      ElMessage.error("搜索错误");
    }
    var circle: any = new AMap.Circle({
      center: center,
      radius: radius, //半径
      borderWeight: 3,
      strokeColor: "#FF33FF",
      strokeOpacity: 1,
      strokeWeight: 6,
      fillOpacity: 0.3,
      strokeStyle: 'dashed',
      strokeDasharray: [10, 10],
      fillColor: '#1791fc',
      zIndex: 50,
    })
    const markers = result.poiList.pois.map((park: any) => {
      const marker: any = new AMap.Marker({
        title: park.title,
        extData: park,
        position: park.location,
        content: `<div class="parkicon">车</div>`,
        offset: new AMap.Pixel(-15, -15)
      });
      marker.on("click", (ree: any) => {
        park.isNavigation = true;
        park.callBack = (park_: any) => {
          AMapUtil.Driving(sourPosition, [park_.location.lng, park_.location.lat]);
        }
        AMapUtil.createInfoWindow(BicycleInfoWindow, marker.getPosition(), park)
      })
      return marker;
    });
    markers.push(circle)
    placeSearchOverlayGroups = new AMap.OverlayGroup(markers);
    GlobalVariables.map.add(placeSearchOverlayGroups);
    GlobalVariables.map.setFitView(markers)
  });
}

function handleSelect(item:any) {
  sourPosition = item.location.split(",");
  PlaceSearch(sourPosition,500);
 }

//创建自行车
async function createParkingSpotCluster() {
  clearParkingSpotCluster();
  const res = await GlobalVariables.axios.get("./json/bike.json");
  const markers = res.data.map((park: any) => {
    const position = park.location.split(",");
    const marker: any = new AMap.Marker({
      title: park.name,
      extData: park,
      position: position,
      content: `<div class="parkicon">车</div>`,
      offset: new AMap.Pixel(-15, -15)
    });
    marker.on("click", (ree: any) => {
      AMapUtil.createInfoWindow(BicycleInfoWindow, marker.getPosition(), park)
    })
    return marker;
  })
  placeSearchOverlayGroups = new AMap.OverlayGroup(markers);
  GlobalVariables.map.add(placeSearchOverlayGroups);
}

//清除自行车
function clearParkingSpotCluster() {
  if (placeSearchOverlayGroups) {
    GlobalVariables.map.remove(placeSearchOverlayGroups);
    placeSearchOverlayGroups = null;
  }
}

AMapUtil.onMapLoaded(() => {
  createParkingSpotCluster();
  GlobalVariables.map.setZoomAndCenter(12, [119.301546, 26.061267]);
})
onUnmounted(() => {
  AMapUtil.clearPlaceSearch();
  clearParkingSpotCluster();
  AMapUtil.clearDriving();
  GlobalVariables.map.clearInfoWindow();
})
</script>

<style scoped lang="less">
.panel01 {
  position: fixed;
  top: 4.5rem;
  left: 1.05rem;
  width: 4rem;
  background-color: #304a4f;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel02 {
  position: fixed;
  top: 4.5rem;
  right: 0.2rem;
  width: 4rem;
  background-color: #304a4f;

  .echarsss1 {
    width: 80%;
    margin: 0 auto;
    height: 2.5rem;
  }
}

.panel03 {
  position: fixed;
  top: 1rem;
  left: 1.05rem;
  width: 4rem;
  background-color: #304a4f;

  .echarsss1 {
    width: 80%;
    margin: 0 auto;
    height: 2.5rem;
  }
}

.panel04 {
  position: fixed;
  top: 1rem;
  right: 0.2rem;
  width: 4rem;
  background-color: #304a4f;
  .echarsss1 {
    width: 80%;
    margin: 0 auto;
    height: 2.5rem;
  }
}
</style>